{% extends 'base.html' %}

{% block content %}
<div class="container mt-4">
    <h5>{{ classname }} 周分析</h5>
    <nav aria-label="Page navigation example">
      <ul class="pagination justify-content-center">
        <li class="page-item"><a class="page-link" href="{% url 'core:day_manage' classid %}">今日</a></li>
        <li class="page-item active"><a class="page-link" href="{% url 'core:week_manage' classid strdate %}">近一周</a></li>
        <li class="page-item"><a class="page-link" href="{% url 'core:month_manage' classid strdate%}">近一月</a></li>
        <li class="page-item"><a class="page-link" href="{% url 'core:term_manage' classid %}">本学期</a></li>
      </ul>
    </nav>
    <!-- 此处添加具体周分析内容 -->
    
     <div class="container">
      <h5>考勤情况统计图：</h5>
       <div class="row justify-content-center">
       <div class="col-md-8 ">
         <canvas id="myChart"></canvas>
       </div>
       <h5>作业情况统计图：</h5>
       <div class="row justify-content-center">
       <div class="col-md-6 ">
         <canvas id="myChart2"></canvas>
       </div>
     </div>

      <h5>作业情况统计图：</h5>
       <div class="row justify-content-center">
       <div class="col-md-6 ">
         <canvas id="myChart3"></canvas>
       </div>
     </div>

    <div>
 
</div>

<script src="{% static 'chartjs/chart.umd.min.js' %}"></script>
<script>


 const ctx2=document.getElementById('myChart2');

 new Chart(ctx2,{
     type:'pie',
     data:{
                labels: [
                  'Red',
                  'Blue',
                  'Yellow'
                ],
            datasets: [{
                  label: 'My First Dataset',
                  data: [300, 50, 100],
                  backgroundColor: [
                    'rgb(255, 99, 132)',
                    'rgb(54, 162, 235)',
                    'rgb(255, 205, 86)'
                  ],
                  hoverOffset: 4
                }]
            }
 });





  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels:
       ['周一', '周二', '周三', '周四', '周五'],
      datasets: [{
        label: '迟到次数',
        data: {{attendance_list.attendance_list}},
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>
</div>
{% endblock %}